<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>职务管理</title>
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		
		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" href="css/font.css">
		<link rel="stylesheet" href="css/xadmin.css">
		
		<script src="../js/jquery-3.3.1.js"></script>
		<script src="../js/bootstrap.js"></script>
		<link rel="stylesheet" href="../css/bootstrap.css">
	
		<link rel="stylesheet" href="../css/mystyle.css">
	</head>
	<body class=" layui-fluid" background="../images/09161932_zr_299f7.jpg" style="background-size: 100%;background-attachment: fixed;">
		<h1 class="title-text">职务管理</h1>
		<div class="main-style">
			
			<div>
				<a href=""  class="sub-add btn btn-info" data-toggle="modal" data-target="#add-modal">添加</a>
			</div>
			<table class="table table-striped table-bordered tb-color">
				<thead class="table-dark tbh-center">
					<tr>
						<th>选择</th>
						<th>序号</th>
						<th>职务编号</th>
						<th>职务名称</th>
						<th>职务职能</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="tbody-duty" class="tbb-center">


				</tbody>
				
			</table>
		  <nav aria-label="Page navigation example" class="page-main">
			<ul  id="ul-pages"  class="pagination mypages">

			</ul>
		  </nav>
		</div>
		
		<!--添加模态框 -->
		<!-- Modal -->
		<div class="modal fade" id="add-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <h6 class="modal-title" id="exampleModalLabel">添加职务</h6>
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
		          <span aria-hidden="true">&times;</span>
		        </button>
		      </div>
		      <div class="modal-body">
				<form id="form-add">
				  <div class="form-group row">
				    <label for="input-dname" class="col-sm-4 col-form-label">职务名称：</label>
				    <div class="col-sm-8">
				      <input name="dname" type="text" class="form-control" id="input-name">
				    </div>
				  </div>
				  <div class="form-group row">
				    <label for="input-dperson" class="col-sm-4 col-form-label">任职人姓名：</label>
				    <div class="col-sm-8">
				      <input name="dperson" type="text" class="form-control" id="input-time">
				    </div>
				  </div>
				  <div class="form-group row">
				    <label for="input-dfunction" class="col-sm-4 col-form-label">职务职能：</label>
				    <div class="col-sm-8">
				      <input name="dfunction" type="text" class="form-control" id="input-time">
				    </div>
				  </div>
				</form>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
		        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="addData()">确定</button>
		      </div>
		    </div>
		  </div>
		</div>
			
			<!-- 修改模态框 -->
			<div class="modal fade" id="modify-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
			  <div class="modal-dialog">
			    <div class="modal-content">
			      <div class="modal-header">
			        <h6 class="modal-title" id="exampleModalLabel">修改职务信息</h6>
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
			          <span aria-hidden="true">&times;</span>
			        </button>
			      </div>
			      <div class="modal-body">
					<form id="form-modify">
					  <div class="form-group row">
					    <label for="input-dname" class="col-sm-4 col-form-label">职务名称：</label>
					    <div class="col-sm-8">
					      <input name="dname"  type="text" class="form-control" id="input-name">
					    </div>
					  </div>
					  
					  <div class="form-group row">
					    <label for="input-dperson" class="col-sm-4 col-form-label">任职人姓名：</label>
					    <div class="col-sm-8">
					      <input name="dperson" type="text" class="form-control" id="input-time">
					    </div>
					  </div>
					  
					  <div class="form-group row">
					    <label for="input-dfunction" class="col-sm-4 col-form-label">职务职能：</label>
					    <div class="col-sm-8">
					      <input name="dfunction" type="text" class="form-control" id="input-time">
					    </div>
					  </div>
					</form>
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
			        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="modifyData()">确定</button>
			      </div>
			    </div>
			  </div>
			</div>
			
			
			<!-- 删除模态框 -->
			<div class="modal fade" id="delete-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
			  <div class="modal-dialog">
			    <div class="modal-content">
			      <div class="modal-header">
			        <h6 class="modal-title" id="exampleModalLabel">温馨提示：</h6>
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
			          <span aria-hidden="true">&times;</span>
			        </button>
			      </div>
			      <div class="modal-body">
			      <h6>是否删除id为:<span id="span-did"></span>的数据</h6>
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
			        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="deleteData($('#span-did').text())">确定</button>
			      </div>
			    </div>
			  </div>
			</div>
			
			
		<script>
			
			let baseUrl = "http://localhost:8080/company"

			// -----------------分页数据展示-------------------
			let pageSize = 5;
			getPageInfo(1)
			
			// 获得分页数据, pageNum=第几页，参数2=每页显示数据量
			function getPageInfo(pageNum) {
				$.ajax({
					url: baseUrl + "/duty/dutys",
					type: "post", //默认get
					dataType: "json",
					data: `pageNum=${pageNum}&pageSize=${pageSize}`,
					success: function(data){
						console.log(data)
						if(data.code == 200) {
							// 动态渲染画面
							showDutys(data.pageInfo)
							// 动态渲染分页按钮
							showPages(pageNum, data.pageInfo.pages)
						}
					}
				})
			}
			
			// 动态渲染页面
			function showDutys(pageInfo) {
				console.log(pageInfo)
				
				// 清空父容器
				$('#tbody-duty').empty()
				
				// 对数据循环
				$(pageInfo.list).each(function(index, duty) {
					// 根据数据，动态创建一行表格
					let trDuty = $(`
							<tr>
								<td>
									<input type="checkbox" class="input-delete">
								</td>
								<td style="display: none;">${duty.did}</td>
								<td>${index + 1}</td>
								<td>${duty.did}</td>
								<td>${duty.dname}</td>
								<td>${duty.dfunction}</td>
								<td>
									<button type="button" class="btn btn-primary" data-toggle="modal"
										data-target="#modify-modal" date-did="${duty.did}">
									  编辑
									</button>
									<button type="button" class="btn btn-danger" data-toggle="modal" 
										data-target="#delete-modal" data-did="${duty.did}">
										删除
									</button>
								</td>
							</tr>					
					`)
					// 将表格放入父容器
					$('#tbody-duty').append(trDuty)
				})				
			}	
			
			// ---------------- 动态分页 ------------------------
			function showPages(pageNum, pages) {
				// 清空父容器
				$('#ul-pages').empty()
				
				let sy = $(`
					<li class="page-item ${1 == pageNum ? 'disabled' : ''}">
					  <a class="page-link" href="javascript:;" aria-label="Previous" 
							onclick = "getPageInfo(1)">
						<span aria-hidden="true">&laquo;</span>
					  </a>
					</li>
				`)
				$('#ul-pages').append(sy)
				
				for (var i = 0; i < pages; i++) { 
					let pageStr = `
						<li class="page-item  ${i+1 == pageNum ? 'active' : ''} ">
							<a  
								class="page-link"
								href="javascript:;"
							    onclick = "getPageInfo(${i+1})">${i+1}
							</a>
						</li>
					`
					let page = $(pageStr)
					$('#ul-pages').append(page)
				}
				
				// getPageInfo
				let wy = $(`
					<li class="page-item ${pages == pageNum ? 'disabled' : ''}">
					  <a class="page-link" href="javascript:;" aria-label="Next"
							onclick = "getPageInfo(${pages})">
					    <span aria-hidden="true">&raquo;</span>
					  </a>
					</li>
				`)
				$('#ul-pages').append(wy)
				
			}

			// ----------- 删除数据---------------
			$('#delete-modal').on('show.bs.modal', function (event) {
				var button = $(event.relatedTarget) 
				var did = button.data('did')
				console.log(did)
				var modal = $(this)
				modal.find('#span-did').text(did)
			})

			function deleteData(did) {
				console.log('删除数据了...' + did)
				$.ajax({
					url: baseUrl + "/duty/delete",
					type: "delete",
					dataType: "json",
					data: "id="+did,
					success: function(data){
						if(data.code == 200) {
							// 刷新画面
							getPageInfo(1)
						}
					}
				})
			}
	
			
			// -------------- 添加 --------------
			function addData() {
				console.log('添加部门....')
				let de = $('#form-add').serialize()
				console.log(de)
				$.ajax({
					url: baseUrl + "/duty/add",
					type: "post",
					dataType: "json",
					data: de,
					success: function(data) {
						if(data.code == 200) {
							// 添加成功，刷新画面
							getPageInfo(1)
						}
					}
				})
			}
						
			// -------------- 修改 --------------
			function modifyData() {
				let modifyde = $('#form-modify').serialize()
				console.log(modifyde)
				$.ajax({
					url: baseUrl + "/duty/modify",
					type: "post",
					dataType: "json",
					data: modifyde,
					success: function(data) {
						if(data.code == 200) {
							// 添加成功，刷新画面
							getPageInfo(1)
						}
					}
				})
			}
			
		</script>	
	</body>
</html>